<template>
    <view class="content">
        <view class="tip">欢迎您随时监督我们的服务，感谢提出宝贵意见！</view>
        <view class="box">
            <view class="item" @click="$gTo(`/pages/order/order`)">
                <view class="grey">选择订单</view>
                <view class="item-right">
                    <input type="text" placeholder="选择订单" class="inp" disabled>
                    <u-icon name="arrow-right" color="#979797" size="28" class="u-m-l-5"></u-icon>
                </view>
            </view>
            <view class="item">
                <view class="grey">线路</view>
                <view class="item-right">
                    <input type="text" v-model="data.line" placeholder="线路内容展示" class="inp" disabled>
                </view>
            </view>
            <view class="item-col">
                <view class="grey">反馈内容</view>
                <textarea v-model="content" maxlength="200" :auto-height="true" placeholder="请输入备注信息" class="t-inp"></textarea>
            </view>
            <view class="item">
                <view class="grey">联系人</view>
                <view class="item-right">
                    <input type="text" v-model="name" placeholder="请输入联系人" class="inp">
                </view>
            </view>
            <view class="item">
                <view class="grey">联系方式</view>
                <view class="item-right">
                    <input type="number" v-model="tel" placeholder="请输入联系方式" class="inp">
                </view>
            </view>
            <view class="item-col">
                <view class="grey">上传图片</view>
				<view class="img">
				    <view class="u-rela" v-for="(item, index) in img" :key="index">
				        <image :src="item" class="up-icon" @click="$previewImage(img, index)"></image>
				        <view class="del-img" @click.stop="$delImage(img, img_id, index)">删除</view>
				    </view>
				    <image src="../../static/image/up.png" class="up-icon" v-if="img.length < 9" @click="chooseImage"></image>
				</view>
            </view>
        </view>
        
        <view class="btn" @click="$noMultipleClicks(doSubmit)">提交</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				noClick: true,//连点
                data: {},
				content: '',
				name: '',
				tel: '',
				img: [],
				img_id: [],
            };
        },
        onLoad() {
			// 接收选择订单监听
            uni.$on('FEEDBACK_ORDER', data => {
				console.log(data)
				this.data = data
			})
        },
        methods: {
			chooseImage() {
			    uni.chooseImage({
			        count: 9, //默认9
			        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
			        sourceType: ['album', 'camera'], // 相机拍照 album 相册、camera 拍照
			        success: (res) => {
			            const tempFilePaths = res.tempFilePaths;
			            for (let i = 0; i < tempFilePaths.length; i++) {
			                this.$upLoadPic(res.tempFilePaths[i]).then(ret => {
			                    console.log(ret)
			                    this.img_id.push(ret.detail.image_id)
			                    this.img.push(ret.detail.image)
			                });
			            }
			        }
			    });
			},
			
            doSubmit() {
				if (!this.data) {
					this.$toast('请选择线路')
					return
				}
				if (!this.content) {
					this.$toast('请输入反馈内容')
					return
				}
				if (!this.name) {
					this.$toast('请输入联系人')
					return
				}
				if (!this.tel) {
					this.$toast('请输入联系方式')
					return
				}
				if (!this.$checkPhone(this.tel)) {
				    this.$toast('手机号码格式不正确');
				    return
				}
				this.$ajax('insert_feedback', {
					user_token: this.$getSync('userToken'),
					order_id: this.data.id, //订单id
					feedback: this.content,//反馈内容
				    name: this.name,
					phone: this.tel,
					image_ids: this.img_id.join(',') || '',
				}).then(ret => {
					if (ret.success == 1000) {
						this.$toast('已收到您的反馈，感谢您提的宝贵意见')
						uni.$emit('FEEDBACK')
						setTimeout(() => {
							this.$backT()
						}, 500)
					} else {
						this.$toast(ret.msg);
					}
				});
            },
        }
    };
</script>

<style lang="scss">
	.del-img{
	    position: absolute;
	    right: 12rpx;
	    bottom: 0;
	    color: #FFFFFF;
	    font-size: 22rpx;
	    padding: 7rpx 12rpx;
	    background-color: #000000;
	    opacity: .7;
	    border-radius: 5rpx;
	}
	
    page{
        background-color: #eef1f6;
    }
    .content{
        padding: 50rpx 20rpx;
    }
    .tip{
        color: #656565;
        padding-bottom: 30rpx;
    }
    .box{
        padding: 0 30rpx;
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 30rpx;
    }
    
    .item{
        padding: 30rpx 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .item-right{
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-left: 15rpx;
    }
    .inp{
        flex: 1;
        text-align: right;
    }
    .grey{
        color: #656565;
    }
    .item-col{
        padding: 30rpx 0;
    }
    .t-inp{
        background-color: #f5f6fa;
        width: 100%;
        min-height: 180rpx;
        height: auto;
        padding: 20rpx;
        border-radius: 10rpx;
        margin-top: 20rpx;
    }
    .img{
        margin-top: 10rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
    }
    .up-icon{
        width: 187rpx;
        height: 187rpx;
        margin-top: 10rpx;
        margin-right: 10rpx;
    }
    
    .btn{
        font-size: 34rpx;
        color: #fff;
        text-align: center;
        padding: 25rpx;
        background-color: #00457f;
        border-radius: 50rpx;
        margin-top: 50rpx;
    }

</style>
